<template>
 
    <div class="container">
      <span class="time">{{ date }}</span>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>冲压A域综合状态监控</span>
        </div>
        <div>
          <img src="../../assets/img/data.jpg" alt />
          <img src="../../assets/img/message.png" alt />
        </div>
      </el-card>
    </div>
 
</template>
<script>
var moment = require("moment")
export default {
  data() {
    return {
      date: new Date()
    };
  },
  mounted() {
    let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {
      _this.date = moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
    }, 1000)
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },
  methods: {
   
  }
};
</script>
<style scoped>
.container {
  margin-top: -47px;
  position: relative;
  width: 100%;
  height: auto;
}
.time {
  position: fixed;
  top: 20px;
  right: 15px;
  z-index: 999;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
img {
  width: 100%;
}

</style>
